<template>
  <div id="container">
    <br>
    <el-row>
      <el-col>
        <el-form ref="form" :model="updateUser" label-width="80px" class="demo-form-inline">
          <el-form-item label="用户编号">
            <el-input v-model="updateUser.uid" readonly></el-input>
          </el-form-item>
          <el-form-item label="用户名">
            <el-input v-model="updateUser.username" readonly></el-input>
          </el-form-item>
          <el-form-item label="真实姓名">
            <el-input v-model="updateUser.realName" readonly></el-input>
          </el-form-item>
          <el-form-item label="手机">
            <el-input v-model="updateUser.mobile" readonly></el-input>
          </el-form-item>
          <el-form-item label="电子邮箱">
            <el-input v-model="updateUser.email" readonly></el-input>
          </el-form-item>
          <el-form-item label="是否禁用">
            <el-switch v-model="updateUser.flag" active-color="#f00"></el-switch>
          </el-form-item>

          <el-form-item label="用户角色">
            <el-checkbox-group v-model="checkedRoleTitleList">
              <el-checkbox :label="role.roleTitle" name="type" v-for="(role,index) in rolesList"
                           :key="role.rid"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onUpdate">更新</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>


<script>
export default {
  name: "editor",
  data() {
    return {
      checkedRoleTitleList: [],
      checkedRoleList: [],
      rolesList: [],
      updateUser: {
        uid: 100,
        username: '',
        realName: '',
        mobile: '',
        email: '',
        birthday: '',
        flag: 0,
      }
    }
  },

  mounted() {
    this.initRolesList();
    this.initUpdateUserProfile();
  },
  methods: {
    initRolesList() {
      this.rolesList = this.$store.dispatch('queryRolesList').then(resp => {
        console.log("--------initRolesList-----------")
        console.log(resp);
        if (resp.code === 200) {
          this.rolesList = resp.data;
          console.log("------初始化角色集合后--------");
          console.log(this.rolesList);
        }
      })
    },

    initUpdateUserProfile() {
      this.$store.dispatch('user/queryUserProfile', this.$route.query.uid).then(resp => {
        if (resp.code === 200) {
          this.updateUser = resp.data;
          console.log("---------要更新的用户资料是----------");
          console.log(this.updateUser);
          //this.checkedRoleList = this.updateUser.rolesList;
          for (let i = 0; i < this.updateUser.rolesList.length; i++) {
            this.checkedRoleTitleList.push(this.updateUser.rolesList[i].roleTitle);
            //this.checkedRoleList.push(this.updateUser.rolesList[i]);
          }
        }
      })
    },

    onUpdate() {
      console.log('更新用户资料');
      //console.log(this.checkedRoleList);
      this.checkedRoleList = [];
      for (let i = 0; i < this.rolesList.length; i++) {
        let role = this.rolesList[i];
        if (this.checkedRoleTitleList.includes(role.roleTitle)) {
          this.checkedRoleList.push(role);
        }
      }
      console.log("------要更新的角色集合是-------")
      console.log(this.checkedRoleList)

      let tempRolesList = [];
      for (let i = 0; i < this.checkedRoleList.length; i++) {
        let r = this.checkedRoleList[i];
        let obj = {
          uid: this.$route.query.uid,
          rid: r.rid
        }
        tempRolesList.push(obj);
      }
      let params = {
        uid: this.$route.query.uid,
        flag: this.updateUser.flag ? '1': '0',
        roles: tempRolesList
      }
      console.log("--------要发送的请求体对象是--------");
      console.log(params);

      if(this.checkedRoleList.length===0){
        this.$message({
          type: 'error',
          message: '用户至少有一个角色'
        })
        return;
      }
      this.$store.dispatch('updateUserRolesList', params).then(resp => {
        console.log(resp);
        if (resp.code === 200) {
          this.$message({
            type: 'success',
            message: resp.msg
          })
        }
      })
    }
  }
}
</script>

<style scoped>
#container {
  margin: 20px 10px;
  padding-right: 20px;
}

.demo-form-inline {
  width: 600px;
  text-align: left;
}
</style>
